import React, { Component } from 'react';
import { Toast, Form, Input, Button } from 'antd-mobile'


import '../../styles/Register/index.scss'
import * as service from '../../api/index'

class index extends Component {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            disable: true
        }
    }

    fromRef = React.createRef()
    async goregistersms() {//注册
        const fromdata = this.fromRef.current.getFieldsValue()
        console.log(fromdata);
        var res = await service.user_docheckphone({ tel: fromdata.phone })
        if (res.data.code == 200) {//手机号没有被注册，继续注册
            Toast.show({
                content: res.data.message,
                duration: 1000,
            })
            //继续注册跳转到发送验证码页面
            this.props.history.push({ pathname: '/register/sms', state: { tel: fromdata.phone } })
        } else if (res.data.code == 10005) {//手机号已被注册
            Toast.show({
                content: res.data.message,
                duration: 1000,
            })
        }

    }
    //手机号正则、为空校验
    phoneValidator = (_, value) => {
        if (value) {
            let reg = /^1[3-9]\d{9}$/;
            if (reg.test(value)) {
                this.setState({
                    loginname: value
                })
                return Promise.reject(this.setState({ disable: false }));
            }
            return Promise.reject(new Error('手机号无效'), this.setState({ disable: true }));
        } else {
            return Promise.reject(new Error('手机号不能为空'), this.setState({ disable: true }));
        }
    }
  

    render() {
        return (
            <div className='index'>
                <div className="main">
                    <Form layout='horizontal' ref={this.fromRef}
                        footer={
                            <Button disabled={this.state.disable} block type='submit' color='primary' size='middle' shape='rounded' onClick={() => { this.goregistersms() }} >
                                下一步
                            </Button>
                        } >
                        <Form.Item
                            name='phone'
                            rules={[{ validator: this.phoneValidator }]}
                        >
                            <Input
                                placeholder='请输入手机号'
                                clearable
                            />
                        </Form.Item>

                    </Form>
                </div>

            </div>
        );
    }
}

export default index;
